import styled from "@emotion/styled";
import React from "react";
export const GridTest = () => {
  return (
    <Container>
      <Header>header</Header>
      <Nav>nav</Nav>
      <Main>main</Main>
      <Aside></Aside>
      <Footer>footer</Footer>
    </Container>
  );
};

const Container = styled.div`
  display: grid;
  /* 上下各6rem 中间自适应 */
  grid-template-rows: 6rem 1fr 6rem;
  /* 左右各20rem 中间自适应 */
  grid-template-columns: 20rem 1fr 20rem;
  /* 子元素的排列方式 */
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
  height: 100vh;
  /* grid子元素间隔10rem */
  /* grid-gap: 10rem; */
`;
// grid-area 给grid子元素命名
const Header = styled.header`
  grid-area: header;
  background-color: red;
`;
const Main = styled.header`
  grid-area: main;
  background-color: green;
`;
const Nav = styled.header`
  grid-area: nav;
  background-color: blue;
`;
const Aside = styled.header`
  grid-area: aside;
  background-color: yellow;
`;
const Footer = styled.header`
  grid-area: footer;
  background-color: purple;
`;
